<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-single-selector-bar
                title="大小"
                desc="size"
                :options="sizes"
                v-model="size"
            ></uxt-single-selector-bar>
            <uxt-bar title="圆角" desc="radius | round">
                <template slot="right">
                    <uxt-radio-group v-model="radius" size="sm" type="btn">
                        <uxt-radio label="无" value=""></uxt-radio>
                        <uxt-radio classes="margin-lr-sm" label="小圆角" value="radius"></uxt-radio>
                        <uxt-radio label="大圆角" value="round"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-bar title="进度">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="progress"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-color-selector-bar
                title="前景色"
                desc="color=xx/颜色值"
                v-model="color"
            ></uxt-color-selector-bar>
            <uxt-color-selector-bar
                title="背景色"
                desc="bg-color=xx/颜色值"
                v-model="bgColor"
                light
                gradual
            ></uxt-color-selector-bar>
            <uxt-bar title="条纹" desc="striped">
                <template slot="right">
                    <uxt-switch v-model="striped" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="条纹动画" desc="animation">
                <template slot="right">
                    <uxt-switch v-model="animation" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="进度条组" desc="striped">
                <template slot="right">
                    <uxt-switch v-model="group" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <uxt-progress
                    :progress="Number(progress)"
                    :size="sizes[size].value"
                    :round="radius === 'round'"
                    :radius="radius === 'radius'"
                    :color="color"
                    :bg-color="bgColor"
                    :striped="striped"
                    :animation="animation"
                    :progress-group="group ? [
                        { bgColor: 'red', progress: 30 },
                        { bgColor: 'green', progress: 30 },
                        { bgColor: 'blue', progress: 40 }
                    ] : []"
                ></uxt-progress>
            </view>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtProgress from '@xtcoder/uxt/components/uxt-progress.vue'
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'

export default {
    components: {
        uxtProgress,
        uxtBarGroup,
        uxtBar,
        uxtRadioGroup,
        uxtRadio,
        uxtSwitch,
        uxtInput,
        uxtSingleSelectorBar,
        uxtColorSelectorBar
    },
    data() {
        return {
            title: '进度条',
            sizes: [
                {
                    label: 'xs-小',
                    value: 'xs'
                },
                {
                    label: 'sm-较小',
                    value: 'sm'
                },
                {
                    label: 'df-默认',
                    value: 'df'
                }
            ],
            size: 2,
            radius: '',
            progress: 60,
            color: '',
            bgColor: 'theme',
            striped: false,
            animation: false,
            group: false
        }
    }
}
</script>

<style lang="scss" scoped></style>
